<template>
  <div>
    <p>123456</p>
    <!-- :on-exceed="handleExceed"  -->
    <el-upload action="http://1.94.210.234:8080/api/common/upload" :before-remove="beforeRemove"
      :on-success="handleUploadSuccess" :on-preview="handlePreview" :on-remove="handleRemove"
      accept=".pdf,.png,.jpeg,.gif,bmp,.tiff,.jpg" :before-upload="beforeUpload" multiple :file-list="fileList">
      <el-button type="primary">上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传图片和PDF文件，且不超过10MB</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <!-- <pdf v-if="type=='.pdf'&& 'application/pdf'" ref="pdf" :src="dialogImageUrl"></pdf> -->
      <!-- <img v-else width="100%" :src="dialogImageUrl" alt="Preview"> -->
      <img style="display: block; max-width: 100%; margin: 0 auto" :src="httpurl + dialogImageUrl">
    </el-dialog>

  </div>
</template>

<script>
// import pdf from 'vue-pdf'
export default {
  // components: {
  //   pdf
  // },
  name: 'up-load',
  props: ['fileList'],
  data() {
    return {
      httpurl: 'http://1.94.210.234:8080/',
      // pdf: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
      dialogImageUrl: '',
      dialogVisible: false,
      url: '',
      type: ''
    }
  },
  methods: {
    // 添加
    handleUploadSuccess(response, file, fileList) {
      // 清空原有的url字符串，重新生成
      console.log(fileList)
      if (response.data != null) {
        this.url = fileList.map(item => item.url || item.response.data).join(',')
        this.$emit('fileurl', this.url)
      }
    },
    // 删除阻止事件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 删除
    handleRemove(file, fileList) {
      // 移除操作时，同样需要更新url字符串
      this.url = fileList.map(item => item.url || item.response.data).join(',')
      this.$emit('fileurl', this.url)
    },
    //点击文件事件
    handlePreview(file) {
      // console.log(file)
      this.type = file.type
      if (file.url != null) {
        if (file.type == '.pdf') {
          // this.dialogImageUrl = file.url
          // this.dialogVisible = true
          // this.type = file.type
          window.open(this.httpurl + file.url, '_blank')
        } else {
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        }
      } else {
        if (file.raw.type == 'application/pdf') {
          // this.dialogImageUrl = file.response.data.url
          // this.dialogVisible = true
          // this.type = file.raw.type
          window.open(this.httpurl + file.response.data, '_blank')
        } else {
          this.dialogImageUrl = file.response.data
          this.dialogVisible = true
        }
      }
    },
    // 上传错误则停止
    beforeUpload(file) {
      if (file.size > 10 * 1024 * 1024) {
        this.$message.warning(`文件大小不能超过500kb，请重新选择文件。`)
        return false
      }
      // 如果文件类型不正确，阻止其上传
      if (!['pdf', 'png', 'jpeg', 'gif', 'bmp', 'tiff', 'jpg'].includes(file.name.split('.').pop().toLowerCase())) {
        this.$message.warning(`只支持图片和PDF文件，请重新选择文件。`)
        return false
      }
      // 如果文件类型正确，允许其上传
      return true
    }
    // 上传数量限制
    // handleExceed(files, fileList) {
    //   this.$message.warning(`You can only select up to 10 files!`)
    // },
    //上传成功
    // handleSuccess(files) {}
  },
  mounted() { }
}
</script>
<style scoped lang="scss">
::v-deep .el-icon-close-tip {
  text-indent: -9999px;
  overflow: hidden;
}

::v-deep .el-upload-list__item-name {
  width: 150px;
}
</style>